/*
 * @Author: wangtao
 * @Date: 2020-06-29 16:32:41
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-04-22 22:45:27
 * @Description: file content
 */

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  PixelRatio,
} from 'react-native';
import moment from 'moment';
import {
  mainBgColorWhite,
  screenWidth,
  px2dp,
  fontColorBlack,
  mainBgColorLightGray,
  splitLineColorLightGray,
  fontColorSecDeepGray,
} from '@/styles';

export default class InsuranceInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  render() {
    const { insuranceDetailSelct } = this.props;
    return (
      <View style={styles.wrap}>
        <Text style={styles.titleWrap}>
          {insuranceDetailSelct.insurType == 1 ? '商业险' : '交强险'}
        </Text>
        <View style={styles.infoWrap}>
          <View style={styles.itemWrap}>
            <Text style={styles.label}>保险单号:</Text>
            <Text style={styles.desc}>
              {insuranceDetailSelct.insurPolicyNo}
            </Text>
          </View>
          <View style={styles.itemWrap}>
            <Text style={styles.label}>保险期间:</Text>
            <Text style={styles.desc}>
              {moment(insuranceDetailSelct.insurEffectStartDate).format(
                'YYYY-MM-DD',
              )}
              {' '}
              至
              {' '}
              {moment(insuranceDetailSelct.insurEffectEndDate).format(
                'YYYY-MM-DD',
              )}
            </Text>
          </View>
          <View style={styles.itemWrap}>
            <Text style={styles.label}>车主:</Text>
            <Text style={styles.desc}>
              {insuranceDetailSelct.carOwnerName}
            </Text>
          </View>
          <View style={styles.itemWrap}>
            <Text style={styles.label}>车驾号:</Text>
            <Text style={styles.desc}>
              {insuranceDetailSelct.carframeNo}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  wrap: {
    width: screenWidth,
    backgroundColor: mainBgColorWhite,
    paddingHorizontal: px2dp(32),
    paddingVertical: px2dp(32),
    marginTop: px2dp(24),
  },
  titleWrap: {
    width: px2dp(686),
    height: px2dp(72),
    backgroundColor: mainBgColorLightGray,
    textAlign: 'center',
    lineHeight: px2dp(72),
    fontSize: px2dp(28),
    fontWeight: 'bold',
    color: fontColorBlack,
  },
  infoWrap: {
    width: '100%',
    height: px2dp(268),
    borderWidth: 1 / PixelRatio.get(),
    borderColor: splitLineColorLightGray,
    paddingHorizontal: px2dp(16),
  },
  itemWrap: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: px2dp(24),
  },
  label: {
    fontSize: px2dp(26),
    color: fontColorSecDeepGray,
  },
  desc: {
    fontSize: px2dp(26),
    color: fontColorBlack,
  },
});
